<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" append-to-body v-dialogDrag width="90%">
    <div class="shadow" style="margin: 15px;border-radius: 5px;background: #fff;padding: 15px;">
      <el-collapse v-model="activeName1" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <div
              style="display: flex;align-items: center;justify-content: space-between;width: calc(100% - 15px);padding-right: 15px;">
              <div class="hbox">
                <div class="hboxxian"></div>
                <div class="hboxhcss">
                  生产试验感知
                </div>
              </div>
            </div>
          </template>
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <div :class="isIndex == index ? 'li2' : 'li1'" v-for="(item,index) in list" :key="index"
                 @click="onIndex(index)">
              <div>
                <div style="font-size: 12px;">
                  第{{ index == 0 ? '一' : index == 1 ? '二' : index == 2 ? '三' : '四' }}步
                </div>
                <div style="display: flex;align-items: center;">
                  <span style="font-size: 14px;font-weight: 500;">{{ item }}</span>
                  <i class="el-icon-warning" style="margin-left: 10px;font-size: 18px;color: #E6A23C;"></i>
                </div>
              </div>
              <div :class=" isIndex == index ? 'hcss1' : 'hcss'">0{{ index + 1 }}</div>
            </div>
          </div>
          <div v-if="isIndex == 0" style="padding: 10px 5px;">
            <div style="margin-bottom: 10px;">
              <el-button size="mini" icon="el-icon-warning" :plain="materialType === 'main'"
                         @click="onButtonsMaterial('main')">铝材(绝缘铝材)
              </el-button>
              <el-button size="mini" icon="el-icon-warning" :plain="materialType === 'assist'"
                         @click="onButtonsMaterial('assist')">辅材(紧牢件、预绞丝)
              </el-button>
            </div>

            <factory-material-main-list v-if="materialType==='main'" :workOrderId="workOrderId" :goodsId="goodsId" :daohuoDetailId="daohuoDetailId" ></factory-material-main-list>
            <factory-material-assist-list v-if="materialType==='assist'" :workOrderId="workOrderId" :goodsId="goodsId" :daohuoDetailId="daohuoDetailId"></factory-material-assist-list>

          </div>
          <div v-if="isIndex == 1" style="padding: 10px 5px;">
            <div style="margin-bottom: 10px;">
              <el-button size="mini" icon="el-icon-warning" :plain="true">生产过程</el-button>
            </div>
            <factory-product-process-list :workOrder="workOrder" :workOrderId="workOrderId" :goodsId="goodsId" :daohuoDetailId="daohuoDetailId"></factory-product-process-list>
          </div>
          <div v-if="isIndex == 2" style="padding: 10px 5px;">
            <div style="margin-bottom: 10px;">
              <el-button size="mini" icon="el-icon-warning" :plain="produceType === 'sample'"
                         @click="onButtonProduce('sample')">抽样检查
              </el-button>
              <el-button size="mini" icon="el-icon-warning" :plain="produceType === 'surface'"
                         @click="onButtonProduce('surface')">外观检查
              </el-button>
              <el-button size="mini" icon="el-icon-warning" :plain="produceType === 'size'"
                         @click="onButtonProduce('size')">尺寸检查
              </el-button>
              <el-button size="mini" icon="el-icon-warning" :plain="produceType === 'zn'"
                         @click="onButtonProduce('zn')">镀锌质量
              </el-button>
              <el-button size="mini" icon="el-icon-warning" :plain="produceType === 'machineryHammer'"
                         @click="onButtonProduce('machineryHammer')">机械试验(防振锤)
              </el-button>
              <el-button size="mini" icon="el-icon-warning" :plain="produceType === 'machineryLink'"
                         @click="onButtonProduce('machineryLink')">机械试验(悬垂线夹和连接金具)
              </el-button>
              <el-button size="mini" icon="el-icon-warning" :plain="produceType === 'machineryStick'"
                         @click="onButtonProduce('machineryStick')">机械试验(间隔棒)
              </el-button>
            </div>
            <factory-goods-test-sample-list v-if="produceType==='sample'" :workOrderId="workOrderId" :goodsId="goodsId" :daohuoDetailId="daohuoDetailId"></factory-goods-test-sample-list>
            <factory-goods-test-surface-list v-if="produceType==='surface'" :workOrderId="workOrderId" :goodsId="goodsId" :daohuoDetailId="daohuoDetailId"></factory-goods-test-surface-list>
            <factory-goods-test-size-list v-if="produceType==='size'" :workOrderId="workOrderId" :goodsId="goodsId" :daohuoDetailId="daohuoDetailId"></factory-goods-test-size-list>
            <factory-goods-test-zn-list v-if="produceType==='zn'" :workOrderId="workOrderId" :goodsId="goodsId" :daohuoDetailId="daohuoDetailId"></factory-goods-test-zn-list>
            <factory-goods-test-machinery-hammer-list v-if="produceType==='machineryHammer'" :workOrderId="workOrderId" :goodsId="goodsId" :daohuoDetailId="daohuoDetailId"></factory-goods-test-machinery-hammer-list>
            <factory-goods-test-machinery-link-list v-if="produceType==='machineryLink'" :workOrderId="workOrderId" :goodsId="goodsId" :daohuoDetailId="daohuoDetailId"></factory-goods-test-machinery-link-list>
            <factory-goods-test-machinery-stick-list v-if="produceType==='machineryStick'" :workOrderId="workOrderId" :goodsId="goodsId" :daohuoDetailId="daohuoDetailId"></factory-goods-test-machinery-stick-list>

          </div>
          <div v-if="isIndex == 3" style="padding: 10px 5px;">
            <factory-goods-product-store-list :workOrderId="workOrderId" :goodsId="goodsId" :daohuoDetailId="daohuoDetailId"></factory-goods-product-store-list>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-dialog>
</template>

<script>
import {deleteAction, getAction} from '@/api/manage'
import FactoryTestZnForm from '@/views/develop/factory/factoryTestZn/module/FactoryTestZnForm'
import FactoryMaterialMainList from "@/views/develop/factory/factoryMaterialMain/FactoryMaterialMainList.vue";
import FactoryMaterialAssistList from "@/views/develop/factory/factoryMaterialAssist/FactoryMaterialAssistList.vue";
import FactoryProductProcessList from "@/views/develop/factory/factoryProductProcess/FactoryProductProcessList.vue";
import FactoryGoodsTestSampleList from "@/views/develop/factory/factoryTestSample/FactoryGoodsTestSampleList.vue";
import FactoryGoodsTestSizeList from "@/views/develop/factory/factoryTestSize/FactoryGoodsTestSizeList.vue";
import FactoryGoodsTestZnList from "@/views/develop/factory/factoryTestZn/FactoryGoodsTestZnList.vue";
import FactoryGoodsTestMachineryHammerList
  from "@/views/develop/factory/factoryTestMachineryHammer/FactoryGoodsTestMachineryHammerList.vue";
import FactoryGoodsTestMachineryLinkList
  from "@/views/develop/factory/factoryTestMachineryLink/FactoryGoodsTestMachineryLinkList.vue";
import FactoryGoodsTestMachineryStickList
  from "@/views/develop/factory/factoryTestMachineryStick/FactoryGoodsTestMachineryStickList.vue";
import FactoryGoodsTestSurfaceList from "@/views/develop/factory/factoryTestSurface/FactoryGoodsTestSurfaceList.vue";
import FactoryGoodsProductStoreList from "@/views/develop/factory/factoryProductStore/FactoryGoodsProductStoreList.vue";

export default {
  name: "FactoryTestQuality",
  components: {
    FactoryGoodsProductStoreList,
    FactoryGoodsTestSurfaceList,
    FactoryGoodsTestMachineryStickList,
    FactoryGoodsTestMachineryLinkList,
    FactoryGoodsTestMachineryHammerList,
    FactoryGoodsTestZnList,
    FactoryGoodsTestSizeList,
    FactoryGoodsTestSampleList,
    FactoryProductProcessList,
    FactoryMaterialAssistList,
    FactoryMaterialMainList,
    FactoryTestZnForm,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      activeName: "first",
      // 弹出层标题
      title: "生产试验感知",
      // 是否显示弹出层
      open: false,
      // 显示搜索条件
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 出厂试验-镀锌质量表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: null,
        orderId: null,
        goodsId: null,
        goodsName: null,
        goodsModel: null,
        batchNumber: null,
        productNumber: null,
        inspectTime: null,
        znThick: null,
      },
      url: {
        list: '/factoryTestZn/factoryTestZn/list',
        remove: '/factoryTestZn/factoryTestZn/',
        export: '/factoryTestZn/factoryTestZn/export',
      },
      tableMaxHeight: window.innerHeight - 320,
      isButton: 1,
      list: ['原材料、组部件检测', '生产工艺及过程检测', '出厂试验', '成品入库'],
      isIndex: 0,
      total1: 0,
      loading1: true,
      activeName1: '1',
      dataList1: [],
      materialType: 'main',
      produceType: 'sample',
      workOrderId: null,
      workOrder: {},
      workOrderCode: null,
      goodsId: null,
      daohuoDetailId: null,
    };
  },
  created() {
    this.getList();
    window.addEventListener('resize', this.getTableHeight);
  },
  destroyed() {
    window.removeEventListener('resize', this.getTableHeight)
  },
  methods: {
    /** 查询出厂试验-镀锌质量列表 */
    getList() {
      this.loading = true;
      getAction(this.url.list, this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getTableHeight() {
      this.tableHeight = window.innerHeight - 320
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    showByWorkOrder(workOrder) {
      this.workOrder = workOrder;
      this.workOrderId = workOrder.id;
      this.goodsId = workOrder.goodsId;
      this.workOrderCode = workOrder.woNo;
      this.open = true;
    },
    // 到货质检
    showByDaohuoDetail(daohuo){
      this.daohuoDetailId = daohuo.id;
      this.goodsId = daohuo.goodId;
      this.open = true;
    },

    onIndex(e) {
      this.isIndex = e
    },
    onButtonsMaterial(type) {
      this.materialType = type;
    },
    onButtonProduce(type) {
      this.produceType = type;
    },
    handleAddMaterial() {
      if (this.materialType == null) {
        this.$message.warning("请选择原材料类型");
      }
      // if(this.materialType == 1){
      //
      // }
      // if (this.materialType == ''){
      //
      // }


    },
    onButtons(e) {
      this.isButton = e;
    },

  }
};
</script>
<style scoped lang="scss">
.shadow {
  box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.05);
}

.li1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 25%;
  margin: 0 5px;
  padding: 0px 10px;
  box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.05);
  border: 1px solid #EBEEF5;
  background: #fff;
  border-radius: 5px;
  color: #333;
  transition: all .5s;
}

.li2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 25%;
  margin: 0 5px;
  padding: 0px 20px;
  box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.05);
  border: 1px solid #1890ff;
  background: #e8f4ff;
  border-radius: 5px;
  color: #1890ff;
  transition: all .5s;
}

.hcss {
  font-size: 42px;
  font-weight: 700;
  background: -webkit-linear-gradient(#C0C4CC, transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hcss1 {
  font-size: 42px;
  font-weight: 700;
  background: -webkit-linear-gradient(#409EFF, transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

::v-deep .el-collapse-item__wrap,
::v-deep .el-collapse,
::v-deep .el-collapse-item__header {
  border: none;
}

::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}

.hbox {
  display: flex;
  align-items: center;
}

.hboxhcss {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.hboxxian {
  width: 5px;
  height: 18px;
  background: #1890ff;
  margin-right: 5px;
  border-radius: 2px;
}
</style>
